<style lang="less">
</style>

<template>
    <div style="padding-left:80px;">
        <el-form
            :model="queryForm.condition"
            label-width="130px"
            :rules="rules"
            ref="addform"
            label-suffix="："
        >
            <el-row :getter="10">
                <el-col :span="20">
                    <el-form-item :label="$t('项目子类别')" prop="typeCode">
                        <el-select
                            v-model="queryForm.condition.fromSys"
                            @change="changeExpert"
                            style="width: 100%"
                        >
                            <el-option label="校内专家" :value="0"></el-option>
                            <el-option label="校外专家" :value="1"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :getter="10">
                <el-col :span="20">
                    <el-form-item :label="$t('项目名称')" label-width="130px" prop="typeName">
                        <el-input
                            :placeholder="$t('请输入')"
                            v-model="queryForm.condition.typeName"
                            maxlength="11"
                        ></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :getter="10">
                <el-col :span="20">
                    <el-form-item :label="$t('留学内容')" prop="typeCode">
                        <el-select
                            v-model="queryForm.condition.fromSys"
                            @change="changeExpert"
                            style="width: 100%"
                        >
                            <el-option label="校内专家" :value="0"></el-option>
                            <el-option label="校外专家" :value="1"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :getter="10">
                <el-col :span="20">
                    <el-form-item :label="$t('备注')" prop="remark">
                        <el-input
                            type="textarea"
                            :rows="5"
                            v-model="queryForm.condition.remark"
                            maxlength="500"
                            :show-word-limit="true"
                        ></el-input>
                        <div>限500字以内</div>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <el-dialog
            width="25%"
            ref="innerDialog"
            :title="$t('graduateBase.prompt')"
            :visible.sync="innerVisible"
            append-to-body
            :top="'28vh'"
        >
            <div style="text-align: left;margin-bottom: 25px;">{{$t('graduateBase.cancelTip')}}</div>
            <div style="text-align: right;">
                <el-button type="primary" @click="confirmInner">{{$t('common.btn.confirm')}}</el-button>
                <el-button @click="cancelInner">{{$t('common.btn.cancel')}}</el-button>
                <el-button
                    type="primary"
                    @click="confirmAndClose"
                >{{$t('graduateBase.saveAndClose')}}</el-button>
            </div>
        </el-dialog>
        <el-row type="flex" class="row-bg" justify="end">
            <el-button @click="cancelDialog">{{$t('graduate.cancel')}}</el-button>
            <el-button type="primary" @click="conserve">{{$t('保存')}}</el-button>
        </el-row>
    </div>
</template>

<script>
import { queryDic } from 'common/src/api/dictionary'
import UTILS from 'common/src/utils/utils'
import graduateStudent from 'common/src/api/graduateStudent/graduateStudent'
export default {
    props: {
        dataList: {
            type: String
        },
        dataProp: {
            type: String
        },
        dataListProp: {
            type: Object
        },
        dataQueryForm: {
            type: Object
        },
        showFlag: {
            type: Boolean
        },
        agent: {
            type: Boolean,
            default: false,
            required: false
        },
        admin: {
            type: Boolean,
            default: false,
            required: false
        }
    },
    data() {
        return {
            dataList: [],
            fileList: [],
            textarea: '',
            remark: '',
            queryForm: {
                condition: {
                    isEnabled: 1,
                    contactPhone: '',
                    typeName: '',
                    account: '',
                    introduction: '',
                    linkAddress: '',
                    typeCode: '',
                    contactEmail: ''
                }
            },
            innerVisible: false,
            id: '',
            restaurants: [],
            formsLearn: [],
            options: {
                facultys: [],
                timeList: [],
                title: [],
                auditStatus: [
                    {
                        label: '待提交',
                        value: 0
                    },
                    {
                        label: '待审核',
                        value: 1
                    },
                    {
                        label: '审核通过',
                        value: 2
                    },
                    {
                        label: '驳回',
                        value: 3
                    },
                    {
                        label: '待录入',
                        value: 4
                    }
                ]
            },
            listName: '',
            pickerOptionsStart: {
                disabledDate: time => {
                    let endDateVal = this.queryForm.effectEndDate
                    if (endDateVal) {
                        return time.getTime() > new Date(endDateVal).getTime()
                    }
                }
            },
            pickerOptionsEnd: {
                disabledDate: time => {
                    let beginDateVal = this.queryForm.effectStartDate
                    if (beginDateVal) {
                        return time.getTime() <= new Date(beginDateVal).getTime() - 86400000
                    }
                }
            },
            rules: {
                typeCode: [
                    { required: true, message: this.$t('请选择项目子类别'), trigger: 'change' }
                ],
                typeName: [
                    { required: true, message: this.$t('请输入项目名称'), trigger: 'blur' }
                ],
                typeName: [{ required: true, message: this.$t('请输入项目名称'),  trigger: 'blur' }]
            }
        }
    },
    watch: {
        showFlag: {
            handler: function(newV, oldV) {
                if (newV) {
                    this.getSessionBase()
                    if (this.dataProp === '编辑') {
                        if (this.dataListProp) {
                            let list = JSON.parse(JSON.stringify(this.dataListProp))
                            this.queryForm.condition = list
                            if (this.queryForm.condition.typeCode === 0) {
                                this.queryForm.condition.name = list.name + '(' + list.account + ')'
                            }
                        }
                    } else if (this.dataProp === '新增') {
                        this.dataListProp = {}
                        this.listName = ''
                        this.$refs['addform'].resetFields()
                        for (const key in this.queryForm.condition) {
                            this.queryForm.condition[key] = ''
                        }
                        this.queryForm.condition.isEnabled = 1
                    }
                }
            }
        }
    },
    mounted() {
        this.getOptions()
    },
    methods: {
        getSessionBase() {
            graduateStudent
                .getSession()
                .then(res => {
                    this.id = res.data.realUid
                })
                .then(() => {
                    this.getBaseListByBase(this.id)
                })
        },
        getBaseListByBase(id) {
            this.formsLearn = []
            graduateStudent.getBaseListByBaseAccount(id).then(res => {
                if (res.data.length > 0) {
                    res.data.forEach(el => {
                        this.formsLearn.push({
                            label: el.baseName,
                            value: el.baseName
                        })
                    })
                }
            })
        },
        handleSelectList() {},
        querySearchList(queryString, cb) {
            let restaurants = this.formsLearn
            let results = queryString
                ? restaurants.filter(this.createFilterList(queryString))
                : restaurants
            // 调用 callback 返回建议列表的数据
            cb(results)
        },
        createFilterList(queryString) {
            return restaurant => {
                return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
            }
        },
        // 过滤$符号
        checkSpecial(rule, value, callback) {
            let regEn = /[`$]/im
            if (regEn.test(value)) {
                return callback(new Error(this.$t('identificationToDoList.cannotContain')))
            } else if (value === '') {
                return callback()
            } else {
                return callback()
            }
        },

        getOptions() {
            // 筛选条件字典查询
            let data = {
                lang: this.$store.getters.language || 'cn',
                type: 'allChild',
                keys: ['profession', 'G_XBIE']
            }
            queryDic(data).then(res => {
                UTILS.fillSelect(
                    {
                        title: 'profession'
                    },
                    res.data,
                    this.options
                )
            })
        },

        // 根据姓名工号模糊查询
        handleChange(val) {
            let obj = {
                pageNum_: 0,
                pageSize_: 100
            }
            // obj.condition = val.target.value;
            obj.condition = val
            this.handleFindTeacher(obj)
        },
        handleFindTeacher(data) {
            graduateStudent.findTeacherList(data).then(res => {
                this.restaurants = res.data.list
                this.restaurants.map(value => {
                    value['value'] = value.name + '(' + value.code + ')'
                })
            })
        },
        // 专家改变
        changeExpert(val) {
            if (this.queryForm.condition.fromSys === 0) {
                this.queryForm.condition.contactPhone = ''
                this.queryForm.condition.contactEmail = ''
            } else if (this.dataProp === '编辑') {
                this.queryForm.condition = JSON.parse(JSON.stringify(this.dataListProp))
                this.queryForm.fromSys = JSON.parse(JSON.stringify(this.dataListProp.fromSys))
            } else if (this.dataProp === '新增' && this.queryForm.condition.fromSys === 1) {
                this.queryForm.condition.contactPhone = ''
                this.queryForm.condition.contactEmail = ''
            }
        },
        // 输入搜索
        querySearch(queryString, cb) {
            let restaurants = this.restaurants
            let results = queryString
                ? restaurants.filter(this.createFilter(queryString))
                : restaurants
            cb(results)
        },
        createFilter(queryString) {
            return restaurant => {
                return (
                    restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0 ||
                    restaurant.code.toLowerCase().indexOf(queryString.toLowerCase()) === 0
                )
            }
        },
        // 内层弹出确定
        confirmInner() {
            this.dataListProp = {}
            this.listName = ''
            this.$refs['addform'].resetFields()
            for (let key in this.queryForm.condition) {
                this.queryForm.condition[key] = ''
            }
            this.queryForm.condition.isEnabled = 1

            this.innerVisible = false
            this.$emit('cancel-dialog', false)
        },
        // 内层弹出取消
        cancelInner() {
            this.innerVisible = false
        },
        // 内层弹出保存关闭
        confirmAndClose() {
            this.innerVisible = false
            this.conserve()
        },
        // 取消
        cancelDialog() {
            // let isEmpty = true;
            // for (let key in this.queryForm.condition) {
            //   if (this.queryForm.condition[key]) {
            //     isEmpty = false;
            //   }
            // }
            // if (isEmpty) {
            //   this.innerVisible = false;
            //   this.listName = '';
            //   this.dataListProp = {};
            //   this.$refs['addform'].resetFields();
            //   for (let key in this.queryForm.condition) {
            //     this.queryForm.condition[key] = '';
            //   }
            //   this.$emit("cancel-dialog", false);
            // } else {
            //   this.innerVisible = true;
            // }
            this.$emit('cancel-dialog', false)
        },

        // 保存
        conserve() {
            this.$refs['addform'].validate(valid => {
                if (valid) {
                    if (this.dataList === '专家') {
                        this.queryForm.condition.category = 1
                        if (this.dataProp === '新增') {
                            if (this.queryForm.condition.typeCode === 0) {
                                this.queryForm.condition.name = this.listName
                            }
                        } else {
                            this.queryForm.condition.name = this.queryForm.condition.name.split(
                                '('
                            )[0]
                        }
                        this.$emit('affirm-form', this.queryForm.condition, this.dataQueryForm)
                    }
                }
            })
        },
        // 删除
        handleRemove() {},
        // 上传成功
        handleSuccess() {}
    },
    // async
    created() {
        this.getSessionBase()
        if (this.dataProp === '编辑') {
            if (this.dataListProp) {
                let list = JSON.parse(JSON.stringify(this.dataListProp))
                this.queryForm.condition = list
                if (this.queryForm.condition.typeCode === 0) {
                    this.queryForm.condition.name = list.name + '(' + list.account + ')'
                }
            }
        } else if (this.dataProp === '新增') {
            this.dataListProp = {}
            this.listName = ''
            for (const key in this.queryForm.condition) {
                this.queryForm.condition[key] = ''
            }
            this.queryForm.condition.isEnabled = 1
        }
    }
}
</script>
